<template>
  <div :class="prefixCls">
    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
      <Badge :count="count" dot :numberStyle="numberStyle">
        <Icon icon="ion:notifcations" size="22" />
      </Badge>
      <template #content>
        <Tabs>
          <template v-for="item in listData" :key="item.key">
            <TabPane>
              <template #tab>
                {{ item.name }}
                <span v-if="item.unreadNum !== 0">({{ item.unreadNum }})</span>
              </template>

              <div class="h-88">
                <div v-if="item.list.length > 0" class="h-82">
                  <div style="height: 320px; overflow: scroll">
                    <div
                      class="list-item readed-mark"
                      v-for="it in item.list"
                      :key="it.id"
                      :class="it.read ? 'readed' : ''"
                      @click="
                        () => {
                          it.read = 1;
                          setReadSingle(it.id);
                        }
                      "
                    >
                      <span class="list-item-title" :title="it.title">{{ it.title }}</span>
                      <span class="list-item-time">{{ it.timeFormat }}</span>
                    </div>
                  </div>
                  <div class="notice-footer"
                    ><span @click="setReadAll()">{{ t('全部设置已读') }}</span></div
                  >
                </div>
                <a-empty :image="simpleImage" v-else />
              </div>
            </TabPane>
          </template>
        </Tabs>
        <ApprovalProcess
          v-if="Approval.visible"
          :taskId="Approval.taskId || ''"
          :processId="Approval.processId || ''"
          :schemaId="Approval.schemaId || ''"
          :visible="Approval.visible"
          @close="
            () => {
              Approval.visible = false;
            }
          "
        />
        <LookProcess
          v-if="LookData.visible"
          :taskId="LookData.taskId || ''"
          :processId="LookData.processId || ''"
          :visible="LookData.visible"
          @close="
            () => {
              LookData.visible = false;
            }
          "
        />
      </template>
    </Popover>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, onUnmounted } from 'vue';
  import { Popover, Tabs, Badge } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { tabListData } from './data';
  import { getMessageList, readAll, readOne } from '/@/api/notification';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { Empty } from 'ant-design-vue';

  import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
  import LookProcess from '/@/views/workflow/task/components/LookProcess.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useRouter } from 'vue-router';
  const { t } = useI18n();
  export default defineComponent({
    components: {
      Popover,
      Tabs,
      TabPane: Tabs.TabPane,
      Badge,
      Icon,
      ApprovalProcess,
      LookProcess,
    },
    setup() {
      const Router = useRouter();
      const Approval = ref<{
        taskId?: string;
        processId?: string;
        schemaId?: string;
        visible: boolean;
      }>({
        visible: false,
      });
      const LookData = ref<{
        taskId?: string;
        processId?: string;
        visible: boolean;
      }>({
        visible: false,
      });
      const { prefixCls } = useDesign('header-notify');
      let times: any = ref();
      const listData = ref(tabListData);
      const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
      times.value = setInterval(() => {
        getDatas();
      }, 10000);
      async function getDatas() {
        try {
          let res = await getMessageList({
            isRead: 0,
            size: 99,
            limit: 1,
          });
          listData.value[0].list = res.list.map((item: any) => {
            return {
              id: item.id,
              title: item.content,
              timeFormat: item.sendTime,
            };
          });
          listData.value[0].unreadNum = res.total;
        } catch (error) {
          clearInterval(times.value);
        }
      }
      const count = computed(() => {
        let count = 0;
        for (let i = 0; i < listData.value.length; i++) {
          count += listData.value[i].unreadNum;
        }
        return count;
      });

      async function setReadAll() {
        await readAll();
        getDatas();
      }
      async function setReadSingle(id: string) {
        await readOne({
          messageIds: [id],
        });
        Router.push('/monitoringCenter/monitoringDynamics'); // 进入监控页面
        getDatas();
      }
      onUnmounted(() => {
        clearInterval(times.value);
      });
      function ApprovalHandle(it, key, type) {
        if (type == 1) {
          Approval.value = {
            taskId: it.taskId,
            processId: it.processId,
            schemaId: it.schemaId,
            visible: true,
          };
        } else {
          LookData.value = {
            taskId: it.taskId,
            processId: it.processId,
            visible: true,
          };
        }
        it.read = 1;
        setReadSingle(it.id, key);
      }
      return {
        prefixCls,
        listData,
        count,
        setReadAll,
        simpleImage,
        numberStyle: {
          top: '18px',
          right: '8px',
        },
        setReadSingle,
        ApprovalHandle,
        Approval,
        LookData,
        t,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-notify';

  .@{prefix-cls} {
    padding-top: 2px;

    &__overlay {
      width: 380px;
    }

    .ant-tabs-content {
      width: 300px;
    }

    .ant-badge {
      font-size: 18px;

      .ant-badge-multiple-words {
        padding: 0 4px;
      }

      svg {
        width: 0.9em;
      }
    }
  }
</style>
<style scoped lang="less">
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    font-weight: 400;
    font-size: 12px;
    height: 36px;
    cursor: pointer;

    .header-title {
      font-weight: 700;
      font-size: 14px;
    }

    .opr {
      color: #02a7f0;
      cursor: pointer;
      font-size: 12px;
    }

    &.readed {
      color: gray;
    }
  }

  .list-data-item {
    display: flex;
    height: 36px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    justify-content: space-between;
    align-items: center;

    &.readed {
      color: gray;
    }
  }

  .list-item-title {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-item-time {
    text-align: right;
  }

  .readed-mark {
    color: #02a7f0;
  }

  .notice-footer {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 12px;
    color: #02a7f0;
    cursor: pointer;
  }
</style>
